<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1 :style="{opacity}">此时的 n 的值为： {{n}}</h1>
      <button @click="add">点我 n + 1</button>
      <button @click="bye">点我销毁 vm</button>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    const vm = new Vue({
      el: '#root',
      // template: `
      //   <div>
      //     <h1>此时的 n 的值为： {{n}}</h1>
      //     <button @click="add">点我 n + 1</button>
      //   </div>
      // `,
      data: {
        n: 1,
        opacity: 1
      },
      methods: {
        add(){
          this.n ++
        },
        bye(){
          console.log('bye')
          this.$destroy()
        }
      },
      beforeCreate() {
        console.log('beforeCreate')
      },
      created() {
        console.log('created')
      },
      beforeMount() {
        console.log('beforeMount')
      },
      mounted() {
        setInterval(() =>{
          this.opacity -= 0.01
          if(this.opacity <= 0) this.opacity = 1
        }, 16)
      },
      beforeUpdate() {
        console.log('beforeUpdate') 
      },
      updated() {
        console.log('updated')
      },
      beforeDestroy() {
        cosole.log('beforeDestroy')
      },
      destroyed() {
        cosole.log('destroyed')
      },
    })
</script>
</html>